<template>
  <div>
    <section class="data_section" style="background:#fff;margin-bottom:32px;">
        <el-col :span="4"><div class="pay data_list"><p style="font-size: 19px">今日累计应收</p><p class="list_number" style="font-size: 20px">{{this.panelIncome.shouldincome}}元</p></div></el-col>
        <el-col :span="4"><div class="income data_list"><p style="font-size: 19px">今日累计出场缴费</p><p class="list_number" style="font-size: 20px">{{this.panelIncome.payoutincome}}元</p></div></el-col>
        <el-col :span="4"><div class="hidden_investors data_list"><p style="font-size: 19px">今日累计补缴收入</p><p class="number" style="font-size: 20px">{{this.panelIncome.paymentincome}}元</p></div></el-col>
        <el-col :span="4"><div class="pass_investors data_list"><p style="font-size: 19px">今日累计入场次数</p><p class="number" style="font-size: 20px">{{this.parkingReport.todayParkIns}}次</p></div></el-col>
        <el-col :span="4"><div class="intention_investors data_list"><p style="font-size: 19px">在停车辆数</p><p class="number" style="font-size: 20px">{{this.parkingReport.parkings}}辆</p></div></el-col>
        <el-col :span="4"><div class="newadd_investors data_list"><p style="font-size: 19px">上班收费员数</p><p class="number" style="font-size: 20px">{{this.workinguserNum}}人</p></div></el-col>
     <!-- <el-row :gutter="5" class="time_row" type="flex" justify="end">
        <el-col :span="7"><div class="data_list"><p style="font-size:20px;color:black;font-family: MicrosoftYaHei;" >实时数据统计时间  :  {{this.panelIncome.statisticaltime}}</p></div></el-col>
      </el-row>-->
    </section>
  </div>
</template>

<script>
  import { getPanelIncome } from '../../../../api/dashboard/todayIncome'
  import { getWorkinguserNum } from '../../../../api/dashboard/collectorDutyNum'
  import { getParkingReport } from '../../../../api/dashboard/parkingReport'
  export default {
    name: 'dynamic-information',
    data() {
      return {
        panelIncome: {
          paymentincome: '',
          payoutincome: '',
          shouldincome: '',
          statisticaltime: ''
        },
        workinguserNum: '',
        parkingReport: {
          overNightCars: '',
          parkings: '',
          placeUsageRate: '',
          todayParkIns: ''
        }
      }
    },
    components: {
    },
    mounted: function() {
      getPanelIncome().then(content => {
        this.panelIncome.paymentincome = content.paymentincome
        this.panelIncome.payoutincome = content.payoutincome
        this.panelIncome.shouldincome = content.shouldincome
        this.panelIncome.statisticaltime = content.statisticaltime
      })
      getWorkinguserNum().then(content => {
        this.workinguserNum = content
      })
      getParkingReport().then(content => {
        this.parkingReport.overNightCars = content.overNightCars
        this.parkingReport.parkings = content.parkings
        this.parkingReport.placeUsageRate = content.placeUsageRate
        this.parkingReport.todayParkIns = content.todayParkIns
      })
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
  .data_section{
    padding:10px;
    .pay{
      background-color:#18a689;
    }
    .income{
      background-color:#99CC00;
    }
    .hidden_investors{
      background-color:#33CC99;
    }
    .intention_investors{
      background-color:#3b5999;
    }
    .waitpending_investors{
      background-color:#66CC99;
    }
    .pending_investors{
      background-color:#009999;
    }
    .pass_investors{
      background-color:#FF9900;
    }
    .newadd_investors{
      background-color:#0099CC;
    }

    .data_list{
      text-align: center;
      font-size: 14px;
      border-radius: 6px;
      padding: 15px 0;
      color:#fff;
      .list_number{
        font-size:16px;
        font-weight:bold;
      }
      .number{
        font-size:16px;
        font-weight:bold;
      }

    }

  }

</style>
